<template>
	<view class="content">
		<listHead :only="only" :title='written'></listHead>
		<view class="top">
			<u-tabs :list="list1" :lineWidth="(windowWidth - (windowWidth/2))" lineColor="#7AD9DF;" :activeStyle="{
			    color: '#303133',
			    fontWeight: 'bold',
			    transform: 'scale(1.05)'
			}" :inactiveStyle="{
			    color: '#7AD9DF',
			    transform: 'scale(1)'
			}" itemStyle="padding:0 0 ; height: 34px; width:50%" @change="TabsChange"></u-tabs>
			<u-radio-group v-model="value" placement="row" activeColor="#7AD9DF !important"
				inactiveColor="#B0E9EC  !important">
				<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist1" :key="index"
					:label="item.name" :name="item.name" :class="value==item.name?'clao':'clat'"
					@change="radioChange(item.name)">
				</u-radio>
			</u-radio-group>
			<virtual-list :items="list" :size="size" :remain="10" variable :marginY="20" :loading="loading"
				:refreshComplete.sync="refreshComplete" @lower="lower" @refresh="refresh">
				<template v-slot="{item}">
					<view class="ListOfPatients_BT" @tap="reportFun(item)">
						<view class="ListOfPatientsBT_item">
							<u-form labelAlign="right">
								<u-form-item prop="name" style="padding: 0 6px;">
									<view class="view-item">
										<text class="ListOfPatientsBTItem_textT">{{item.bedid}}</text>
										<view class="ListOfPatientsBTItem_text">
											{{item.pname}}
										</view>
									</view>
									<view class="view-item1">
										<view class="ListOfPatientsBTItem_textT textT1">
											{{item.mrn}}
										</view>
										<view class="ListOfPatientsBTItem_Right">
											<view class="Right-left">
												{{item.series}}
											</view>
										</view>
									</view>
									<view class="Iage"></view>
								</u-form-item>
							</u-form>
							<view class="ListOfPatientsBT_center">
								<view class="BT_center_remark">{{item.deptid}}</view>
								<view class="BT_center">
									<view class="BT_center_hosder">
										{{item.dr}}
									</view>
									<text class="BT_date">{{item.indate}}</text>
								</view>
							</view>
						</view>
					</view>
				</template>
			</virtual-list>
		</view>
	</view>
</template>

<script>
	import listHead from '../../components/html/listHead.vue'
	import VirtualList from '@/components/xc-virtual-list/xc-virtual-list.vue'
	import {
		mapMutations,
		mapState
	} from "vuex";
	import {
		Consultation_Get_list
	} from '../../api/user.js'
	export default {
		components: {
			listHead,
			VirtualList
		},
		data() {
			return {
				only: false,
				written: '',
				list1: [{
					name: '发出申请',
				}, {
					name: '收到回复',
				}],
				currentTabIndex: 0,
				windowWidth: '',
				radiolist1: [{
						name: '三日内',
						disabled: false,
					},
					{
						name: '全部',
						disabled: false,
					}
				],
				value: '三日内',
				list: [],
				size: 0,
				refreshComplete: false,
				loading: false
			}
		},
		computed: {
			...mapState('user', ['userInfo', 'passObj', 'scanningArray', 'adminValue'])
		},
		onLoad() {
			let _this = this
			uni.getSystemInfo({
				success: function(res) {
					_this.windowWidth = res.windowWidth;
				}
			});
			_this.Consultation_Get_listFun()
		},
		onReady() {
			this.size = +uni.upx2px(115);
		},
		mounted() {
			this.written = uni.getStorageSync('adminValue')
		},
		methods: {
			...mapMutations("user", ["set_sheetObj"]),
			reportFun(data) {
				this.set_sheetObj(data)
				uni.navigateTo({
					url: './ConsultationDetails?id=' + this.currentTabIndex + ''
				});
			},
			TabsChange(e) {
				this.currentTabIndex = e.index
				this.Consultation_Get_listFun()
			},
			radioChange(e) {
				this.value = e
				this.Consultation_Get_listFun()
			},
			async Consultation_Get_listFun() {
				try {
					uni.showLoading({
						title: '加载中...', //显示的文字
						// duration: 3000, //显示多少时间，默认1500毫秒
						icon: "loading", //自定义显示的图标，默认成功success，错误error,加载loading，不显示图标是none
						mask: true
					})
					const user = uni.getStorageSync('userInfo')
					const data = {
						HosKind: user.hoscode,
						sType: this.currentTabIndex == 0 ? '发出' : '收到',
						sKind: this.value,
						sOperdept: user.HosKind,
						sOperJp: user.sPassword
					}
					const res = await this.$http.Consultation_Get_list(data)
					uni.hideLoading();
					if (res&&!res[0].result) {
						this.list = res
						// console.log(this.list);
					
					}else{
						this.list = []
					}
				} catch (e) {
					this.list = []
					//TODO handle the exception
				}
			},
			lower() {
				// this.loading = true
				// setTimeout(() => {
				// 	const arr = []
				// 	let temp = 5
				// 	for (let i = index; i < index + 15; i ++) {
				// 		arr.push({
				// 			id: i,
				// 			value: `item${i}<br/>`.repeat(this.random())
				// 		})
				// 	}
				// 	index += 15
				// 	this.items = this.items.concat(arr)
				// 	this.loading = false
				// }, 1000)
			},
			random() {
				// return ~~Math.random() * 5 + 5
			},
			refresh() {
				// setTimeout(() => {
				// 	this.refreshComplete = true
				// }, 1000)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
		overflow: hidden;
	}

	.ListOfPatients_BT {
		// width: 100%;
		// height: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		// padding-top: 10px;
		padding: 10px 10px;
		// margin-top: 166px;
		padding-bottom: 0px;
		// height: calc(100% - 165px);
		overflow-y: scroll;

		.Patients_BT {
			width: 100%;
			height: 100%;
		}

		.ListOfPatientsBT_item {
			width: 100%;
			min-height: 50px;
			background: #B0E9EC;
			border-radius: 6px;
			padding-bottom: 7px;
			position: relative;

			&:last-child {
				margin-bottom: 0 !important;
			}

			.view-item {
				width: 55%;
				display: flex;
				align-items: center;
				z-index: 9;
			}

			.view-item1 {
				display: flex;
				align-items: center;
				z-index: 9;
			}

			.ListOfPatientsBTItem_text {
				font-size: 16px;
				font-family: SourceHanSansCN-Medium, SourceHanSansCN;
				font-weight: 500;
				color: #FF4D65;
				line-height: 24px;
				text-align: right;
			}

			.ListOfPatientsBTItem_textT {
				width: 50%;
				font-size: 16px;
				font-family: SourceHanSansCN-Medium, SourceHanSansCN;
				font-weight: 500;
				color: #333333;
				line-height: 24px;
				z-index: 9;
			}

			.textT1 {
				padding-right: 46px;
			}

			.ListOfPatientsBTItem_Right {
				width: 50%;
				display: flex;
				justify-content: right;
				align-items: center;

				.Right-left {
					width: 20px;
					height: 20px;
					background: #5CB3B9;
					box-shadow: 0px 0px 2px 0px #5CB3B9;
					border-radius: 50%;
					font-size: 14px;
					font-family: SourceHanSansCN-Medium, SourceHanSansCN;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 21px;
					text-align: center;

				}
			}

			.Iage {
				width: 100% !important;
				height: 50% !important;
				position: absolute;
				top: -1px;
				right: 0;
				background-size: auto !important;
				background-position: 100% 0% !important;
				background: url("../../assets/image/sjd.png") no-repeat;
				z-index: 1;
			}
		}

		.ListOfPatientsBT_itemTwo {
			width: 100%;
			min-height: 50px;
			background: #B0E9EC;
			border-radius: 6px;
			position: relative;
			display: flex;
			justify-content: space-between;

			.ListOfPatientsBT_itemTwo_left {
				width: 190px;
				min-height: 50px;
				line-height: 50px;
				display: flex;
				padding: 0 10px;
				// justify-content: space-around;

			}

			.ListOfPatientsBT_itemTwo_right {
				.ListOfPatientsBT_itemTwo_rightSJ {
					position: absolute;
					top: 4px;
					right: 0;
					width: 161px;
					height: 30px;
					z-index: 1;
				}

				.ZXImg {
					position: absolute;
					top: 0;
					right: 0;
					width: 182px !important;
					height: 40px !important;
				}

			}
		}

		.ListOfPatientsBT_center {
			background: #F6FEFF;
			border-radius: 6px;
			opacity: 0.95;
			margin: -3px 6px 0;
			padding: 10px 10px 5px;

			.BT_center_remark {
				font-size: 16px;
				font-family: SourceHanSansCN-Medium, SourceHanSansCN;
				font-weight: 500;
				color: #086168;
				line-height: 24px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.BT_center {
				display: flex;
				align-items: center;
				justify-content: flex-end;

				.BT_center_hosder {
					display: flex;
					align-items: center;
					font-size: 14px;
					font-family: SourceHanSansCN-Medium, SourceHanSansCN;
					font-weight: 500;
					color: #FF4D65;
					line-height: 21px;
					padding-right: 10px;
					// width: 40%;
					// justify-content: right;
				}

				.BT_date {
					// width: 55%;
					text-align: right;
					font-size: 14px;
					font-family: SourceHanSansCN-Normal, SourceHanSansCN;
					font-weight: 400;
					color: #333333;
					line-height: 21px;
				}

			}
		}
	}

	::v-deep .u-tabs__wrapper__nav__line {
		background: #7AD9DF !important;
	}

	::v-deep .u-tabs__wrapper__nav__item__text {
		font-size: 16px;
		font-family: SourceHanSansCN-Medium, SourceHanSansCN;
		font-weight: 500;
		color: #2F7378 !important;
		line-height: 24px;
	}

	::v-deep .u-radio-group--row {
		justify-content: space-around;
	}

	::v-deep .u-radio__icon-wrap--circle {
		width: 26px !important;
		height: 26px !important;
		background-color: #B0E9EC !important;
		// border-color:  #7AD9DF  !important;
	}

	::v-deep .u-radio-group--row {
		margin-top: 10px;
	}

	.clao ::v-deep {
		.u-icon__icon {
			border-radius: 50%;
			background: #FEFF87;
			color: #FEFF87 !important;
			width: 13px;
			height: 13px;
		}
	}

	.clat ::v-deep {
		.u-icon__icon {
			border-radius: 50%;
			background: #FFFFFF;
			width: 13px;
			height: 13px;
		}
	}

	::v-deep .u-form-item__body {
		margin: -5px 0 0 0;

	}

	::v-deep .u-form-item__body__right__content__slot {
		justify-content: space-between;
	}
</style>
